<template>
  <j-modal title="新增任务" :width="900" :visible="visible" :confirmLoading="loading" switchFullscreen @cancel="handleCancel"
    @ok="handleOk" :maskClosable="false">
    <a-form-model ref="ruleForm" :rules="rules" :model="form" :label-col="{ span: 7 }" :wrapper-col="{ span: 16 }">
      <a-row>
        <a-col :span="11">
          <a-form-model-item label="策略名称" prop="strategyName">
            <a-input v-model="form.strategyName" placeholder="请输入" :disabled="isDisabled" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="周期" prop="cycle">
            <a-select v-model="form.cycle" allowClear placeholder="请选择" style="width:100%;" :disabled="isDisabled">
              <a-select-option v-for="(item, key) in zqArr" :key="key" :value="item.value">{{ item.title }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="11">
          <a-form-model-item label="起始时间" prop="startTime">
            <a-date-picker v-model="form.startTime" allowClear style="width:100%;" format="YYYY-MM-DD"
              valueFormat="YYYY-MM-DD" :disabled="isDisabled" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="截至时间" prop="endTime">
            <a-date-picker v-model="form.endTime" allowClear style="width:100%;" format="YYYY-MM-DD"
              valueFormat="YYYY-MM-DD" :disabled="isDisabled" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="11">
          <a-form-model-item label="启用状态" prop="enableStatus">
            <a-radio-group name="radioGroup" v-model="form.enableStatus" :disabled="isDisabled">
              <a-radio value="1">启用</a-radio>
              <a-radio value="0">停用</a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="是否立即执行" prop="isImmediatelyExecute">
            <a-radio-group name="radioGroup" v-model="form.isImmediatelyExecute" :disabled="isDisabled">
              <a-radio value="1">是</a-radio>
              <a-radio value="0">否</a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="11" class="textareaBox">
          <a-form-model-item label="备注" prop="remark">
            <a-textarea placeholder="请输入备注" v-model="form.remark" :autosize="{ minRows: 9, maxRows: 10 }"
              :disabled="isDisabled" allow-clear />
          </a-form-model-item>
          <p style="position: absolute;right: 75px;top: 170px;color: #999;">已输入 {{ form.remark.length
          }} / 300</p>
        </a-col>
      </a-row>
    </a-form-model>
  </j-modal>
</template>
<script>
import { getDictItemsFromCache } from '@/api/api'
import * as fdApi from '@/api/plugging/authority/fd.js'
import * as jfApi from '@/api/plugging/authority/jf.js'
export default {
  props: ['policyStatus'],
  data() {
    return {
      visible: false,
      form: {
        name: "",
        remark: ""
      },
      loading: false,
      isDisabled: false,
      zqArr: getDictItemsFromCache('fd_cycle'),
      rules: {
        strategyName: [{ required: true, message: '请输入' }],
        cycle: [{ required: true, message: '请选择' }],
        startTime: [{ required: true, message: '请选择' }],
        endTime: [{ required: true, message: '请选择' }],
        enableStatus: [{ required: true, message: '请选择' }],
        isImmediatelyExecute: [{ required: true, message: '请选择' }],
        remark: [{ required: true, message: '请输入' }, { validator: this.textVerification300 }],
      },
    }
  },
  async created() {
  },
  methods: {
    show(record) {
      this.visible = true
      this.form = {
        name: "",
        remark: ""
      }
      if (record != undefined) {
        this.getDetail(record.id)
        this.isDisabled = true
      } else {
        this.isDisabled = false
      }
    },
    getDetail(id) {
      let api = ''
      if (this.policyStatus == 'fd_db') api = fdApi.fd_db_queryById({ id: id })
      if (this.policyStatus == 'fd_fb') api = fdApi.fd_fb_queryById({ id: id })
      if (this.policyStatus == 'jf_db') api = jfApi.jf_db_queryById({ id: id })
      if (this.policyStatus == 'jf_fb') api = jfApi.jf_fb_queryById({ id: id })
      api.then(res => {
        if (res.success) {
          this.form = res.result
          this.form.cycle = res.result.cycle.toString()
          this.form.enableStatus = res.result.enableStatus.toString()
          this.form.isImmediatelyExecute = res.result.isImmediatelyExecute.toString()
        }
      })
    },
    onTimeChange1(date) {
      this.$set(this.pageFilter, 'startRvDate', date[0])
      this.$set(this.pageFilter, 'endRvDate', date[1])
    },
    onTimeChange2(date) {
      this.$set(this.pageFilter, 'startRvDate', date[0])
      this.$set(this.pageFilter, 'endRvDate', date[1])
    },
    handleCancel() {
      this.visible = false
    },
    textVerification300(rule, value, callback) {
      let ValiExp = new RegExp(
        /^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z0-9_-]|[,，.。?？""“”‘’'';；/+()（）{}]){1,999}$/
      ); //  /^[\u0391-\uFFE5A-Za-z]+$/
      if (value && value.length > 300) {
        callback("输入长度不能大于300个字符");
      } else {
        callback();
      }
    },
    handleOk() {
      if (this.isDisabled) {
        this.visible = false
        return
      }
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.loading = true
          let api = ''
          if (this.policyStatus == 'fd_db') api = fdApi.fd_db_strategyAdd(this.form)
          if (this.policyStatus == 'fd_fb') api = fdApi.fd_fb_strategyAdd(this.form)
          if (this.policyStatus == 'jf_db') api = jfApi.jf_db_strategyAdd(this.form)
          if (this.policyStatus == 'jf_fb') api = jfApi.jf_fb_strategyAdd(this.form)
          api.then(res => {
            if (res.success) {
              this.$message.success(res.message)
              this.$emit('ok');
              this.visible = false
              this.loading = false
            } else {
              this.loading = false
              this.$message.warn(res.message)
            }
          })
            .catch(e => {
              this.loading = false
              this.$message.warn('请求失败！')
            })
        }
      })
    }
  },
}
</script>
<style lang="less" scoped>
/deep/.ant-row {
  margin-bottom: 8px !important;
}

.textareaBox {
  width: 100%;

  /deep/.ant-form-item-label {
    width: 13.5%;
  }

  /deep/.ant-form-item-control-wrapper {
    width: 80%;
  }
}
</style>
